<template>
  <div>
    <zm-form :model="form">
      <zm-form-item
        :label="label"
        :prop="`planKeyList.${index}.key`"
        v-for="(item, index) in form.planKeyList"
        :key="index"
        :rules="{
          required: true,
          message: '*为必填项，不能为空',
          trigger: 'blur',
        }"
      >
        <zm-input
          v-model="item.key"
          class="w200 mr10"
          placeholder="请输入排期编码"
        ></zm-input>
        <zm-button size="mini" icon="el-icon-plus" @click="onAdd">
          新增
        </zm-button>
        <zm-button
          size="mini"
          icon="el-icon-delete"
          type="danger"
          @click="onDel(index)"
          v-if="index !== 0"
        >
          删除
        </zm-button>
      </zm-form-item>
    </zm-form>
  </div>
</template>

<script>
export default {
  name: 'PlanKeyItem',
  components: {},
  mixins: [],
  props: {
    value: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      form: {
        planKeyList: [
          {
            key: ''
          }
        ]
      }
    }
  },
  computed: {
    label () {
      return this.type === '4' ? '可用排期：' : '不可用排期：'
    }
  },
  watch: {
    'form.planKeyList': {
      handler (val) {
        console.log('object')
        const planKey = this.form.planKeyList.map((i) => i.key)
        this.$emit('input', planKey.join(','))
      },
      deep: true
    }
  },
  created () {
    const _planKeyList = this.value.split(',').map((i) => {
      return { key: i }
    })
    this.$set(this.form, 'planKeyList', _planKeyList)
  },
  methods: {
    onAdd () {
      console.log(999)
      this.form.planKeyList.push({
        key: ''
      })
    },
    onDel (index) {
      this.form.planKeyList.splice(index, 1)
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
